define('pc/js/mod/ucenter/vue-account-index', [
    'utils/fetchEnhancer',
    'utils/helpers',
    'utils/XTemplate',
    'utils/FileUpload',
    'utils/ImageClip'], (fetch, helpers, XTemplate, FileUpload, ImageClip) => {

Vue.prototype.helpers = helpers;

const VueAccountIndex = {
    props: ['strUid'],
    data: function() {
        return {
            fetching: true,
            uploading: false,
            info: null
        }
    },
    methods: {
        fetchData: function() {
            let _self = this;
            fetch('/api/account/getuser?uid=' + this.strUid).then((res) => {
                if(0 === res.status) {
                    _self.render(res.data.data);
                }
            });
        },
        render: function(data) {
            this.fetching = false;
            this.info = data;
        },
        initFileUpload: function() {
            let _self = this;

            this.fileUpload = new FileUpload({
                id: 'index-avatar-file',
                fileSizeLimit: 1024 * 1024,
                accept: 'image/jpg, image/jpeg, image/png'
            });

            // event
            this.fileUpload.fileQueuedHandler = (file) => {
                _self.checkDimensions(file, (res) => {
                    XUI.dialog.showWithBtn(
                        '<div id="clipcanvas" style="height: 400px"></div>',
                        '图片裁剪',
                        XUI.BTN_OK | XUI.BTN_CANCEL, {
                            dialogWidth: 400,
                            cancelButtonText: '重新选择'
                        },
                        (flag) => {
                            if(1 === flag) {
                                _self.clipEnd();
                            }
                        });

                    _self.imageClip = new ImageClip({
                        canvasWidth: 400,
                        canvasHeight: 400,
                        maskStyle: 'rgba(0, 0, 0, .8)',
                        clipWidth: _self.minWidth,
                        clipHeight: _self.minHeight
                    });
                    _self.imageClip.render(_self.doc.getElementById('clipcanvas'), res);
                });
            };
        },
        clipEnd: function() {
            let _self = this;
            let base64 = this.imageClip.getPreview('image/jpeg', 0.9);

            this.uploading = true;

            fetch('/api/account/editavatar', {
                method: 'POST',
                body: 'avatar=' + base64
            }).then((res) => {
                if(0 === res.status) {
                    _self.uploading = false;
                    _self.info.avatar = res.data.avatar + '?t=' + Math.random();

                    // 删除缓存
                    USER_SDK.getInstance().deleteCache();
                }
            });
        },
        checkDimensions: function(file, callback) {
            let _self = this;
            let img = new Image();
            let r = new FileReader();

            img.onload = (e) => {
                if(img.width < _self.minWidth || img.height < _self.minHeight) {
                    XUI.dialog.alert('图片尺寸太小，至少为 ' + _self.minWidth + ' * ' + _self.minHeight);

                } else {
                    callback(r.result);
                }

                img.onload = null;
                img = null;
                r.onload = null;
                r = null;
            };

            r.onload = (e) => {
                img.src = r.result;
            };
            r.readAsDataURL(file.nativeFile);
        },
        showLevelInfo: function() {
            let that = this;
            if(null === this.levelData) {
                this.fetchLevelData(() => {
                    let html = that.levelTemplate.run({
                        list: that.levelData
                    });
                    XUI.dialog.showWithBtn(html, '说明', XUI.BTN_OK, {dialogWidth: 320});
                });

            } else {
                let html = this.levelTemplate.run({
                    list: this.levelData
                });
                XUI.dialog.showWithBtn(html, '说明', XUI.BTN_OK, {dialogWidth: 320});
            }
        },
        fetchLevelData: function(callback) {
            let that = this;
            fetch('/api/level/get').then((res) => {
                if(0 === res.status) {
                    that.levelData = res.data.data;
                    callback();
                }
            });
        }
    },
    created: function() {
        this.doc = document;
        this.fileUpload = null;
        this.minWidth = 150;
        this.minHeight = 150;

        this.levelData = null;
        this.levelHtml =
`<% var list = data.list; %>
<div style="height: 300px; overflow: auto">
<table class="x-table small">
<tr><th>最小经验</th><th>最大经验</th><th>等级</th></tr>
<% if(list){ for(var i=0,len=list.length; i<len; i++){ %>
<tr><td><%= list[i].minexp %></td><td><%= list[i].maxexp %></td><td><%= list[i].level_name %></td></tr>
<%  }} %>
</table>
</div>`;

        this.levelTemplate = new XTemplate();
        this.levelTemplate.compile(this.levelHtml);
    },
    mounted: function() {
        this.fetchData();
    },
    updated: function() {
        this.initFileUpload();
    },
    template:
`<div v-if="!fetching">
    <h2 class="uc-itemtitle">基本信息</h2>
    <div class="uc-content-wrapper">
        <div class="uc-welcome-avatar x-pullleft">
            <div class="uc-welcome-avatar-mask">
                <i></i>
                <p>修改头像</p>
                <input type="file" id="index-avatar-file" class="uc-welcome-avatar-file" />
            </div>
            <div v-if="uploading" class="uc-welcome-avatar-loading"></div>
            <img v-bind:src="helpers.getAvatar(info.avatar)"/>
        </div>
        <div class="uc-welcome-baseinfo">
            <strong class="x-darkgray">{{ info.user_name }}</strong>
            <a href="#/nick" class="uc-welcome-editnick">（修改）</a>
            <div class="uc-welcome-level-wrapper">
                <p>等级: <a v-on:click="showLevelInfo" style="text-decoration:underline" href="javascript:;">{{ info.credit.level_name }}</a></p>
                <p class="uc-userlevel-progress-wrapper">
                    <span class="x-level x-level-43">Lv {{ info.credit.level_num }}</span>
                    <span class="uc-userlevel-progress-bar">
                        <span v-bind:style="{width: (info.credit.experience * 100 / info.credit.maxexp) + '%' }" class="uc-userlevel-progress-percent"></span>
                    </span>
                    <span>{{ info.credit.experience }}/{{ info.credit.maxexp }}</span>
                </p>
            </div>
        </div>
        <div class="x-clear"></div>
    </div>

    <h2 v-if="false" class="uc-itemtitle">账号安全</h2>
    <div v-if="false" class="uc-flowlayout-wrapper">
        <ul>

            <li class="uc-flowlayout-item x-pullleft">
                <a href="javascript:;" class="x-btn uc-flowlayout-item-btn">修改</a>
                <div class="uc-flowlayout-item-left x-pullleft">
                    <i class="uc-flowlayout-item-icon-pwd"></i>
                </div>
                <div class="uc-flowlayout-item-right x-pullleft">
                    <p>已设定密码</p>
                    <p class="x-lightgray">定期修改密码以提高安全性</p>
                </div>
            </li>
            <li class="uc-flowlayout-item x-pullleft">
                <a href="javascript:;" class="x-btn uc-flowlayout-item-btn">修改</a>
                <div class="uc-flowlayout-item-left x-pullleft">
                    <i class="uc-flowlayout-item-icon-email"></i>
                </div>
                <div class="uc-flowlayout-item-right x-pullleft">
                    <p>已设定邮箱</p>
                    <p class="x-lightgray">定期修改密码以提高安全性</p>
                </div>
            </li>

        </ul>
        <div class="x-clear"></div>
    </div>
</div>`
};

return VueAccountIndex;

});
